<template>
    <vechart :id="id" :option="chartoption"></vechart>
</template>

<script>
    import vechart from './vechart.vue'

    export default {
        components: {vechart},
        props: ["id", "chartData"],
        data() {
            return {
                chartoption: {
                    color:["#00ffff"],
                    tooltip: {
                        formatter: '{b0}:  {c1}名',
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['语文', '数学', '英语', '综合']

                    },
                    yAxis: {
                        type: 'value',
                        axisLabel:{
                            show:false
                        }
                    },
                    series: [
                        {
                            name: '123',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [this.chartData.total - this.chartData.data[0],
                                this.chartData.total - this.chartData.data[1],
                                this.chartData.total - this.chartData.data[2],
                                this.chartData.total - this.chartData.data[3]]
                        },
                        {
                            name: '排名',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                }
                            },
                            data: this.chartData.data
                        }

                    ]
                }
            }
        },
        mounted() {
        }
    };
</script>
